<template>
    <div id="sys_home">
        <el-row :gutter="20">
            <el-col style="width: 252px;">
                <el-card shadow="hover" class="mgb20" style="height:252px; width: 252px">
                    <div class="user-info">
                        <img src="../../../assets/img/img.jpg" class="user-avator" alt />
                        <div class="user-info-cont">
                            <div class="user-info-name">{{ name }}</div>
                            <div>{{ role }}</div>
                        </div>
                    </div>
                    <div class="user-info-list">
                        最后登录时间：
                        <span>{{ lastDateTime }}</span>
                    </div>
                    <div class="user-info-list">
                        当前登录主机：
                        <span>{{ IP }}</span>
                    </div>
                </el-card>
                <div class="el-card__body_" style="height:357px; width: 252px">
                    <div class="card-wrapper">
                        <div @click="handleSwitch(0, '曲库概况')" :class="{ active: cards[0] }">
                            <img src="@/assets/img/曲库概况.jpg" alt="" />
                            <p>曲库概况</p>
                        </div>
                        <div @click="handleSwitch(1, '运营概况')" :class="{ active: cards[1] }">
                            <img src="@/assets/img/运营概况.jpg" alt="" />
                            <p>运营概况</p>
                        </div>
                        <div @click="handleSwitch(2, '审核概况')" :class="{ active: cards[2] }">
                            <img src="@/assets/img/审核概况.jpg" alt="" />
                            <p>审核概况</p>
                        </div>
                        <div v-if="btnPermit" @click="handleSwitch(3, '工作日志')" :class="{ active: cards[3] }">
                            <img src="@/assets/img/工作日志.jpg" alt="" />
                            <p>工作日志</p>
                        </div>

                        <div @click="handleSwitch(4, '用户反馈')" :class="{ active: cards[4] }">
                            <img src="@/assets/img/工作日志.jpg" alt="" />
                            <p>用户反馈</p>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col style="width:calc(100% - 272px); margin-left: 20px">
                <!-- ======================曲库概况============================= -->
                <div class="handle-box">
                    <!-- 图表相关 -->
                    <div class="total-wrapper" v-if="cards[0]">
                        <div>
                            <p>总入库歌曲数</p>
                            <p>{{ commafy(surveyData.songCount) }}</p>
                        </div>
                        <div style="position:relative;">
                            <div id="main" style="width:100%;height:250px; padding:0;"></div>
                            <span
                                style="position:absolute; right: 15px;top: 15px; color:#409EFF; cursor:pointer; font-size: 12px;"
                                @click="handleExport1"
                                >导出</span
                            >
                        </div>
                        <div style="position:relative;">
                            <div id="_trend" style="width:100%;height:250px;  padding:0;"></div>
                            <span
                                style="position:absolute; right: 15px;top: 15px; color:#409EFF; cursor:pointer; font-size: 12px;"
                                @click="handleExport2"
                                >导出</span
                            >
                        </div>
                        <div>
                            <p>昨日入库歌曲数</p>
                            <p>{{ commafy(surveyData.yesterdaySongCount) }}</p>
                        </div>
                        <div style="position:relative;">
                            <div id="_singer" style="width:100%;height:250px;  padding:0;"></div>
                            <span
                                style="position:absolute; right: 15px;top: 15px; color:#409EFF; cursor:pointer; font-size: 12px;"
                                @click="handleExport3"
                                >导出</span
                            >
                        </div>
                        <div style="position:relative;">
                            <div id="_song" style="width:100%;height:250px;  padding:0;"></div>
                            <span
                                style="position:absolute; right: 15px;top: 15px; color:#409EFF; cursor:pointer; font-size: 12px;"
                                @click="handleExport4"
                                >导出</span
                            >
                        </div>
                    </div>
                </div>
                <!-- ======================运营概况============================= -->
                <div v-if="cards[1]">
                    <div class="container">
                        <div class="handle-box">
                            <p style="">运营数据</p>
                            <div class="grid-total">
                                <div>
                                    <p>歌单总数</p>
                                    <p>{{ commafy(songListStatisticsData.playlistCount) }}</p>
                                </div>
                                <div>
                                    <p>上线歌单总数</p>
                                    <p>{{ commafy(songListStatisticsData.onlineCount) }}</p>
                                </div>
                                <div>
                                    <p>下线歌单总数</p>
                                    <p>{{ commafy(songListStatisticsData.offlineCount) }}</p>
                                </div>
                                <div>
                                    <p>待审核歌单总数</p>
                                    <p>{{ commafy(songListStatisticsData.notreviewedCount) }}</p>
                                </div>
                                <div>
                                    <p>昨日新增歌单</p>
                                    <p>{{ commafy(songListStatisticsData.yesterdayCount) }}</p>
                                </div>
                            </div>
                            <p style="margin:0;padding:0; float: left; margin: 10px 0 10px">TOP300 歌单</p>
                            <el-button type="text" style="float:right; margin: 10px 0 10px" @click="handleExport5">导出</el-button>
                            <el-button type="text" style="float:right; margin: 10px 10px 10px" @click="handleExport">当月</el-button>
                            <el-button type="text" style="float:right; margin: 10px 0 10px" @click="handleExport">当日</el-button>
                        </div>

                        <el-table :data="top300SongListData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                            <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>

                            <el-table-column label="歌单名称" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{ scope.row.name }}</template>
                            </el-table-column>
                            <el-table-column label="标签" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{ scope.row.name }}</template>
                            </el-table-column>

                            <el-table-column label="歌单类型" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{ scope.row.name }}</template>
                            </el-table-column>

                            <el-table-column label="创建者" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{ scope.row.name }}</template>
                            </el-table-column>

                            <el-table-column label="播放次数" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{ scope.row.name }}</template>
                            </el-table-column>
                        </el-table>
                        <div class="pagination">
                            <el-pagination
                                background
                                layout="total,sizes, prev, pager, next, jumper"
                                :page-sizes="[5, 10, 20, 30]"
                                @size-change="handleTop300SongListSizeChange"
                                :current-page="top300SongListQuery.pageIndex"
                                :page-size="top300SongListQuery.pageSize"
                                :total="top300SongListPageTotal"
                                @current-change="handleTop300SongListPageChange"
                            ></el-pagination>
                        </div>
                    </div>
                </div>

                <!-- ======================审核概况============================= -->
                <!-- 歌单审核概况 -->
                <div v-if="cards[2]">
                    <div class="container">
                        <div class="handle-box">
                            <p style="">歌单审核概况</p>
                            <el-form>
                                <!-- <el-form-item label=""> -->
                                <el-select
                                    @change="handleAuditOverviewSearch"
                                    :clearable="true"
                                    v-model="auditOverviewQuery.type"
                                    placeholder="类型"
                                    class="handle-select mr10"
                                >
                                    <el-option key="0" label="全部" value="0"></el-option>
                                    <el-option key="1" label="编辑歌单" value="1"></el-option>
                                    <el-option key="2" label="编辑电台" value="2"></el-option>
                                    <el-option key="3" label="编辑榜单" value="3"></el-option>
                                </el-select>
                                <!-- </el-form-item> -->

                                <!-- <el-form-item label=""> -->
                                <el-button type="text" style="float:right; margin: 10px 0 10px" @click="handleExport">当月</el-button>
                                <!-- </el-form-item> -->
                                <!-- <el-form-item label=""> -->
                                <el-button type="text" style="float:right; margin: 10px 10px 10px" @click="handleExport">当周</el-button>
                                <!-- </el-form-item> -->
                                <!-- <el-form-item label=""> -->
                                <el-button type="text" style="float:right; margin: 10px 0 10px" @click="handleExport">当日</el-button>
                                <!-- </el-form-item> -->

                                <!-- <el-form-item label=""> -->
                                <el-input
                                    @keyup.native.enter="handleAuditOverviewSearch"
                                    clearable
                                    @clear="handleAuditOverviewSearch"
                                    v-model="auditOverviewQuery.ids"
                                    placeholder="ID"
                                    class="handle-input mr10"
                                ></el-input>
                                <!-- </el-form-item> -->
                                <!-- <el-form-item label=""> -->
                                <el-input
                                    @keyup.native.enter="handleAuditOverviewSearch"
                                    v-model="auditOverviewQuery.name"
                                    placeholder="名称"
                                    class="handle-input mr10"
                                    clearable
                                    @clear="handleAuditOverviewSearch"
                                ></el-input>
                                <!-- </el-form-item> -->
                                <!-- <el-form-item label=""> -->
                                <el-input
                                    @keyup.native.enter="handleAuditOverviewSearch"
                                    v-model="auditOverviewQuery.auditBy"
                                    placeholder="审核人员"
                                    class="handle-input mr10"
                                    clearable
                                    @clear="handleAuditOverviewSearch"
                                ></el-input>
                                <!-- </el-form-item> -->
                                <!-- <el-form-item label=""> -->
                                <el-button :disabled="disabled" type="primary" @click="handleAuditOverviewSearch">
                                    <!-- 查询 -->
                                    {{ $t('m.queryBtn') }}
                                </el-button>
                                <!-- </el-form-item> -->
                            </el-form>
                        </div>

                        <el-table :data="auditOverviewData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                            <el-table-column
                                prop="objectId"
                                label="ID"
                                width="auto"
                                :show-overflow-tooltip="true"
                                align="center"
                            ></el-table-column>

                            <el-table-column label="名称" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{ scope.row.name }}</template>
                            </el-table-column>

                            <el-table-column label="类型" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{ scope.row.type == 1 ? '歌单' : '' }}</template>
                            </el-table-column>

                            <el-table-column label="审核时间" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{ scope.row.auditTime }}</template>
                            </el-table-column>

                            <el-table-column label="审核结果" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{
                                    scope.row.auditResult == 1 ? '通过' : scope.row.auditResult == -1 ? '不通过' : ''
                                }}</template>
                            </el-table-column>

                            <el-table-column label="备注" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{ scope.row.remark }}</template>
                            </el-table-column>

                            <el-table-column label="管理" width="180" align="center">
                                <template slot-scope="scope">
                                    <el-button
                                        v-if="scope.row.auditResult == -1"
                                        type="text"
                                        @click="handleAuditOverviewEdit(scope.$index, scope.row)"
                                    >
                                        <!-- 编辑 -->
                                        {{ $t('m.editBtn') }}
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="pagination">
                            <el-pagination
                                background
                                layout="total,sizes, prev, pager, next, jumper"
                                :page-sizes="[5, 10, 20, 30]"
                                @size-change="handleAuditOverviewSizeChange"
                                :current-page="auditOverviewQuery.pageIndex"
                                :page-size="auditOverviewQuery.pageSize"
                                :total="auditOverviewPageTotal"
                                @current-change="handleAuditOverviewPageChange"
                            ></el-pagination>
                        </div>
                    </div>
                </div>
                <!-- 曲库审核概况 -->
                <div v-if="cards[2]" style="margin-top: 20px;">
                    <div class="container">
                        <div class="handle-box">
                            <p style="">曲库审核概况</p>
                            <!-- <el-select
                                @change="handleAuditOverviewSearch"
                                :clearable="true"
                                v-model="auditOverviewQuery.type"
                                placeholder="类型"
                                class="handle-select mr10"
                            >
                                <el-option key="0" label="全部" value="0"></el-option>
                                <el-option key="1" label="编辑歌单" value="1"></el-option>
                                <el-option key="2" label="编辑电台" value="2"></el-option>
                                <el-option key="3" label="编辑榜单" value="3"></el-option>
                            </el-select> -->
                            <el-button type="text" style="float:right; margin: 10px 0 10px" @click="handleExport_">当月</el-button>
                            <el-button type="text" style="float:right; margin: 10px 10px 10px" @click="handleExport_">当周</el-button>
                            <el-button type="text" style="float:right; margin: 10px 0 10px" @click="handleExport_">当日</el-button>
                            <!-- <el-input
                                @keyup.native.enter="handleAuditOverviewSearch"
                                clearable
                                @clear="handleAuditOverviewSearch"
                                v-model="auditOverviewQuery.ids"
                                placeholder="ID"
                                class="handle-input mr10"
                            ></el-input> -->
                            <el-input
                                @keyup.native.enter="handleAuditOverviewSearch_"
                                v-model="auditOverviewQuery_.name"
                                placeholder="名称"
                                class="handle-input mr10"
                                clearable
                                @clear="handleAuditOverviewSearch_"
                            ></el-input>
                            <el-input
                                @keyup.native.enter="handleAuditOverviewSearch_"
                                v-model="auditOverviewQuery_.auditBy"
                                placeholder="审核人员"
                                class="handle-input mr10"
                                clearable
                                @clear="handleAuditOverviewSearch_"
                            ></el-input>

                            <el-select
                                @change="handleAuditOverviewSearch_"
                                :clearable="true"
                                v-model="auditOverviewQuery_.auditResult"
                                placeholder="审核结果"
                                class="handle-select mr10"
                            >
                                <el-option key="1" label="通过" value="1"></el-option>
                                <el-option key="-1" label="不通过" value="-1"></el-option>
                            </el-select>

                            <el-button class="mr10" :disabled="disabled" type="primary" @click="handleAuditOverviewSearch_">
                                <!-- 查询 -->
                                {{ $t('m.queryBtn') }}
                            </el-button>
                        </div>

                        <el-table :data="auditOverviewData_" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                            <el-table-column
                                prop="objectId"
                                label="ID"
                                width="auto"
                                :show-overflow-tooltip="true"
                                align="center"
                            ></el-table-column>

                            <el-table-column label="名称" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{ scope.row.name }}</template>
                            </el-table-column>

                            <el-table-column label="类型" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{
                                    scope.row.type == 1 ? '歌曲' : scope.row.type == 2 ? '歌手' : scope.row.type == 3 ? '专辑' : ''
                                }}</template>
                            </el-table-column>

                            <el-table-column label="审核时间" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{ scope.row.auditTime }}</template>
                            </el-table-column>

                            <el-table-column label="审核结果" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{
                                    scope.row.auditResult == 1 ? '通过' : scope.row.auditResult == -1 ? '不通过' : ''
                                }}</template>
                            </el-table-column>

                            <el-table-column label="备注" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{ scope.row.remark }}</template>
                            </el-table-column>

                            <el-table-column label="管理" width="180" align="center">
                                <template slot-scope="scope">
                                    <el-button
                                        v-if="scope.row.auditResult == -1"
                                        type="text"
                                        @click="handleAuditOverviewEdit_(scope.$index, scope.row)"
                                    >
                                        <!-- 编辑 -->
                                        {{ $t('m.editBtn') }}
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="pagination">
                            <el-pagination
                                background
                                layout="total,sizes, prev, pager, next, jumper"
                                :page-sizes="[5, 10, 20, 30]"
                                @size-change="handleAuditOverviewSizeChange_"
                                :current-page="auditOverviewQuery_.pageIndex"
                                :page-size="auditOverviewQuery_.pageSize"
                                :total="auditOverviewPageTotal_"
                                @current-change="handleAuditOverviewPageChange_"
                            ></el-pagination>
                        </div>
                    </div>
                </div>

                <!-- ======================工作日志============================= -->
                <div v-if="cards[3]">
                    <div class="container">
                        <div class="handle-box">
                            <p style="">工作日志</p>

                            <el-input
                                @keyup.native.enter="handleWorkLogSearch"
                                v-model="workLogQuery.ids"
                                placeholder="ID"
                                class="handle-input mr10"
                                clearable
                                @clear="handleWorkLogSearch"
                            ></el-input>

                            <el-input
                                @keyup.native.enter="handleWorkLogSearch"
                                v-model="workLogQuery.operators"
                                placeholder="操作者"
                                class="handle-input mr10"
                                clearable
                                @clear="handleWorkLogSearch"
                            ></el-input>

                            <el-date-picker
                                class="mr10"
                                v-model="workLogQuery.timeDate"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                @change="handleWorkLogSearch"
                            >
                            </el-date-picker>
                            <el-button :disabled="disabled" type="primary" @click="handleWorkLogSearch">
                                <!-- 查询 -->
                                {{ $t('m.queryBtn') }}
                            </el-button>
                        </div>

                        <el-table :data="workLogData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                            <el-table-column
                                prop="id"
                                label="ID"
                                width="auto"
                                :show-overflow-tooltip="true"
                                align="center"
                            ></el-table-column>

                            <el-table-column label="操作者" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{ scope.row.operators }}</template>
                            </el-table-column>

                            <el-table-column label="编辑歌单(歌单、榜单、电台)" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{ scope.row.playlistEditCount }}</template>
                            </el-table-column>

                            <el-table-column label="编辑歌曲" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{ scope.row.songEditCount }}</template>
                            </el-table-column>

                            <el-table-column label="编辑歌手" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{ scope.row.actorEditCount }}</template>
                            </el-table-column>

                            <el-table-column label="编辑专辑" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{ scope.row.albumEditCount }}</template>
                            </el-table-column>

                            <el-table-column label="打标签" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{ scope.row.taggingCount }}</template>
                            </el-table-column>

                            <el-table-column label="总计" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{ scope.row.total }}</template>
                            </el-table-column>
                        </el-table>
                        <div class="pagination">
                            <el-pagination
                                background
                                layout="total,sizes, prev, pager, next, jumper"
                                :page-sizes="[5, 10, 20, 30]"
                                @size-change="handleWorkLogSizeChange"
                                :current-page="workLogQuery.pageIndex"
                                :page-size="workLogQuery.pageSize"
                                :total="workLogPageTotal"
                                @current-change="handleWorkLogPageChange"
                            ></el-pagination>
                        </div>
                    </div>
                </div>

                <!-- ======================用户反馈============================= -->

                <div v-if="cards[4]">
                    <div class="container">
                        <div class="handle-box">
                            <p style="">用户反馈</p>

                            <el-select
                                v-model="userFeedBackQuery.channel"
                                @change="handleUserFeedBackSearch"
                                :clearable="true"
                                class="mr10"
                                style="width: 120px;"
                                placeholder="请选择渠道"
                            >
                                <el-option key="1" label="OPPO" value="1001"></el-option>
                                <el-option key="2" label="VIVO" value="1002"></el-option>
                                <el-option key="3" label="小米" value="1003"></el-option>
                            </el-select>

                            <el-input
                                @keyup.native.enter="handleUserFeedBackSearch"
                                v-model="userFeedBackQuery.brand"
                                placeholder="品牌"
                                class="handle-input mr10"
                                clearable
                                @clear="handleUserFeedBackSearch"
                            ></el-input>

                            <el-input
                                @keyup.native.enter="handleUserFeedBackSearch"
                                v-model="userFeedBackQuery.model"
                                placeholder="机型"
                                class="handle-input mr10"
                                clearable
                                @clear="handleUserFeedBackSearch"
                            ></el-input>

                            <!-- <el-input
                                @keyup.native.enter="handleWorkLogSearch"
                                v-model="workLogQuery.operators"
                                placeholder="操作者"
                                class="handle-input mr10"
                                clearable
                                @clear="handleWorkLogSearch"
                            ></el-input>
                            <el-button type="primary" @click="handleWorkLogSearch">查询</el-button> -->
                        </div>

                        <el-table :data="userFeedBackData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                            <!-- <el-table-column
                                prop="id"
                                label="ID"
                                width="auto"
                                :show-overflow-tooltip="true"
                                align="center"
                            ></el-table-column> -->

                            <el-table-column label="ID" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{ scope.row.id }}</template>
                            </el-table-column>

                            <el-table-column label="渠道" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{
                                    scope.row.channel == '1001'
                                        ? 'OPPO'
                                        : scope.row.channel == '1002'
                                        ? 'VIVO'
                                        : scope.row.channel == '1003'
                                        ? '小米'
                                        : ''
                                }}</template>
                            </el-table-column>

                            <el-table-column label="品牌" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{ scope.row.brand }}</template>
                            </el-table-column>

                            <el-table-column label="机型" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{ scope.row.model }}</template>
                            </el-table-column>

                            <el-table-column label="类型" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{ scope.row.contentType }}</template>
                            </el-table-column>

                            <el-table-column label="内容ID" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{ scope.row.deviceId }}</template>
                            </el-table-column>

                            <el-table-column label="反馈信息" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{
                                    scope.row.type == 1 ? '文案错误' : scope.row.type == 2 ? '时间错误' : ''
                                }}</template>
                            </el-table-column>

                            <el-table-column label="app版本" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{ scope.row.appVersion }}</template>
                            </el-table-column>

                            <el-table-column label="反馈时间" :show-overflow-tooltip="true" align="center">
                                <template slot-scope="scope">{{ scope.row.createTime }}</template>
                            </el-table-column>
                        </el-table>
                        <div class="pagination">
                            <el-pagination
                                background
                                layout="total,sizes, prev, pager, next, jumper"
                                :page-sizes="[5, 10, 20, 30]"
                                @size-change="handleUserFeedBackSizeChange"
                                :current-page="userFeedBackQuery.pageIndex"
                                :page-size="userFeedBackQuery.pageSize"
                                :total="userFeedBackPageTotal"
                                @current-change="handleUserFeedBackPageChange"
                            ></el-pagination>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>

        <!-- ======================新歌速递 || TOP10000 歌曲============================= -->
        <el-row :gutter="20">
            <div v-if="cards[0]" class="container" style="width: calc(100% - 350px); margin-left: 272px;">
                <div class="handle-box">
                    <p v-if="cards[0]">新歌速递</p>
                    <el-select
                        v-if="cards[0]"
                        v-model="newSongExpressQuery.day"
                        placeholder="请选择查询条件"
                        class="handle-select mr10"
                        @change="handleNewSongExpressSearch"
                        :clearable="true"
                    >
                        <el-option key="1" label="7日上线新歌" :value="7"></el-option>
                        <el-option key="2" label="15日上线新歌" :value="15"></el-option>
                        <el-option key="3" label="30日上线新歌" :value="30"></el-option>
                        <!-- <el-option key="4" label="7日上线新碟" value="7日上线新碟"></el-option>
                        <el-option key="5" label="15日上线新碟" value="15日上线新碟"></el-option>
                        <el-option key="6" label="30日上线新碟" value="30日上线新碟"></el-option> -->
                    </el-select>
                    <el-button v-if="cards[0]" type="text" style="float:right;" @click="handleExport6">导出</el-button>
                </div>
                <el-table :data="newSongExpressData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                    <el-table-column
                        v-if="cards[0]"
                        prop="id"
                        label="ID"
                        width="auto"
                        align="center"
                        :show-overflow-tooltip="true"
                    ></el-table-column>

                    <el-table-column v-if="cards[0]" label="名称" :show-overflow-tooltip="true" align="center">
                        <template slot-scope="scope">{{ scope.row.name }}</template>
                    </el-table-column>

                    <el-table-column v-if="cards[0]" label="歌手名" :show-overflow-tooltip="true" align="center">
                        <template slot-scope="scope">{{ scope.row.singerName }}</template>
                    </el-table-column>

                    <el-table-column v-if="cards[0]" label="专辑名" :show-overflow-tooltip="true" align="center">
                        <template slot-scope="scope">{{ scope.row.albumName }}</template>
                    </el-table-column>

                    <el-table-column v-if="cards[0]" label="付费模式" :show-overflow-tooltip="true" align="center">
                        <template slot-scope="scope">{{ scope.row.payType ? scope.row.payType.join('、') : null }}</template>
                    </el-table-column>

                    <el-table-column v-if="cards[0]" label="授权区域" :show-overflow-tooltip="true" align="center">
                        <template slot-scope="scope">{{ scope.row.authTerritory ? scope.row.authTerritory.join('、') : null }}</template>
                    </el-table-column>

                    <el-table-column v-if="cards[0]" label="上线日期" :show-overflow-tooltip="true" align="center">
                        <template slot-scope="scope">{{ scope.row.onlineTime }}</template>
                    </el-table-column>

                    <el-table-column v-if="cards[0]" label="下线日期" :show-overflow-tooltip="true" align="center">
                        <template slot-scope="scope">{{ scope.row.offlineTime }}</template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination
                        background
                        layout="total,sizes, prev, pager, next, jumper"
                        :page-sizes="[5, 10, 20, 30]"
                        @size-change="handleNewSongExpressSizeChange"
                        :current-page="newSongExpressQuery.pageIndex"
                        :page-size="newSongExpressQuery.pageSize"
                        :total="newSongExpressPageTotal"
                        @current-change="handleNewSongExpressPageChange"
                    ></el-pagination>
                </div>
            </div>

            <!-- TOP10000 歌曲 -->
            <div v-if="cards[1]" class="container" style="width: calc(100% - 350px); margin-left: 272px;">
                <div class="handle-box">
                    <p style="margin:0;padding:0; float: left; margin: 0px 0 10px" v-if="cards[1]">TOP10000 歌曲</p>
                    <el-button v-if="cards[1]" type="text" style="float:right; margin: 10px 10px 10px" @click="handleExport"
                        >当月</el-button
                    >
                    <el-button v-if="cards[1]" type="text" style="float:right; margin: 10px 0 10px" @click="handleExport">当日</el-button>
                </div>
                <el-table :data="top10000SongsData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                    <el-table-column
                        v-if="cards[1]"
                        prop="id"
                        label="ID"
                        width="auto"
                        :show-overflow-tooltip="true"
                        align="center"
                    ></el-table-column>

                    <el-table-column v-if="cards[1]" label="歌曲名" :show-overflow-tooltip="true" align="center">
                        <template slot-scope="scope">{{ scope.row.name }}</template>
                    </el-table-column>

                    <el-table-column v-if="cards[1]" label="歌手名" :show-overflow-tooltip="true" align="center">
                        <template slot-scope="scope">{{ scope.row.singerName ? scope.row.singerName.join('、') : '' }}</template>
                    </el-table-column>

                    <el-table-column v-if="cards[1]" label="专辑名" :show-overflow-tooltip="true" align="center">
                        <template slot-scope="scope">{{ scope.row.albumName }}</template>
                    </el-table-column>

                    <el-table-column v-if="cards[1]" label="cp名称" :show-overflow-tooltip="true" align="center">
                        <template slot-scope="scope">{{ scope.row.cpName }}</template>
                    </el-table-column>

                    <el-table-column v-if="cards[1]" label="播放次数" :show-overflow-tooltip="true" align="center">
                        <template slot-scope="scope">{{ scope.row.playbackCount }}</template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination
                        background
                        layout="total,sizes, prev, pager, next, jumper"
                        :page-sizes="[5, 10, 20, 30]"
                        @size-change="handleTop10000SongsSizeChange"
                        :current-page="top10000SongsQuery.pageIndex + 1"
                        :page-size="top10000SongsQuery.pageSize"
                        :total="top10000SongsPageTotal"
                        @current-change="handleTop10000SongsPageChange"
                    ></el-pagination>
                </div>
            </div>
        </el-row>
    </div>
</template>

<script>
import FileSaver from 'file-saver';
import * as EXCEL from 'exceljs/dist/exceljs.min';

// import Schart from 'vue-schart';
// let echarts = require('echarts');
import { syshome } from './mixins/syshome';
import { mapMutations, mapGetters } from 'vuex';
import { debounce, throttle } from '@/utils/utils.js';
import { commafy } from '@/utils/utils';
import { title } from 'process';
// import BMap from 'BMap';
// import BMapLib from 'BMapLib';
export default {
    name: 'SysHome',
    mixins: [syshome],
    data() {
        return {
            btnPermit: JSON.parse(localStorage.getItem('roles')) ? JSON.parse(localStorage.getItem('roles')).includes('ADMIN') : false,
            disabled: false,
            lastDateTime: localStorage.getItem('lastDateTime'),
            // locationProvince: '',
            // locationCity: '',
            IP: require('os').hostname(),
            name: localStorage.getItem('ms_username')
            // cards: [true, false, false, false]

            // query: {
            //     address: '',
            //     name: '',
            //     pageIndex: 1,
            //     pageSize: 10
            // },
            // pageTotal: 0,
            // tableData: []
        };
    },
    components: {
        // Schart
    },
    computed: {
        role() {
            return this.name === 'admin' ? '超级管理员' : '普通用户';
        },
        ...mapGetters({
            sidebarData: 'sidebarData',
            tagsList: 'tagsList',
            // 曲库概况
            cards: 'cards',
            surveyData: 'surveyData',
            newSongExpressData: 'qukuSurveyData',
            newSongExpressPageTotal: 'qukuSurveyPageTotal',
            newSongExpressQuery: 'qukuSurveyQuery',
            // 运营概况
            // TOP300 歌单
            top300SongListData: 'top300SongListData',
            top300SongListPageTotal: 'top300SongListPageTotal',
            top300SongListQuery: 'top300SongListQuery',
            // TOP10000 歌曲
            tempData: 'tempData',
            top10000SongsData: 'top10000SongsData',
            top10000SongsPageTotal: 'top10000SongsPageTotal',
            top10000SongsQuery: 'top10000SongsQuery',
            songListStatisticsData: 'songListStatisticsData',
            // 审核概况
            // 歌单审核概况
            auditOverviewData: 'auditOverviewData',
            auditOverviewQuery: 'auditOverviewQuery',
            auditOverviewPageTotal: 'auditOverviewPageTotal',
            // 曲库审核概况
            auditOverviewData_: 'auditOverviewData_',
            auditOverviewQuery_: 'auditOverviewQuery_',
            auditOverviewPageTotal_: 'auditOverviewPageTotal_',

            // 工作日志
            workLogData: 'workLogData',
            workLogQuery: 'workLogQuery',
            workLogPageTotal: 'workLogPageTotal',

            // 用户反馈
            userFeedBackData: 'userFeedBackData',
            userFeedBackQuery: 'userFeedBackQuery',
            userFeedBackPageTotal: 'userFeedBackPageTotal'
        })
    },

    methods: {
        // 导出
        tableToExcel(temp = [], filename = '') {
            const workbook = new EXCEL.Workbook();
            const sheet = workbook.addWorksheet('sheet1');
            sheet.addRows(temp);
            workbook.xlsx.writeBuffer().then(buffer => {
                const data = new Blob([buffer], {
                    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
                });
                FileSaver.saveAs(data, filename + '.xlsx');
            });
        },

        handleExport1() {
            console.log(1);
            console.log(this.surveyData.cpProportion);

            let temp = [
                ['cpName'.toUpperCase(), 'proportion'.toUpperCase()]
                // 数据格式
                // [title1, title2, title3],
                // [value1, value2, value3],
                // [value1, value2, value3],
                // [value1, value2, value3]
            ];
            this.surveyData.cpProportion.map(item => {
                temp.push([item['cpName'], item['proportion']]);
            });
            this.tableToExcel(temp, 'CP曲库占比');
        },
        handleExport2() {
            console.log(2);
            let temp = [['date'.toUpperCase(), 'count'.toUpperCase()]];
            this.surveyData.inboundTrends.map(item => {
                temp.push([item['date'], item['count']]);
            });
            this.tableToExcel(temp, '入库趋势图');
        },
        handleExport3() {
            console.log(3);
            let temp = [['grade'.toUpperCase(), 'singerName'.toUpperCase()]];
            this.surveyData.popularSinger.map(item => {
                temp.push([item['grade'], item['singerName']]);
            });
            this.tableToExcel(temp, '热门歌手top100');
        },
        handleExport4() {
            console.log(4);
            let temp = [['grade'.toUpperCase(), 'songName'.toUpperCase()]];
            this.surveyData.popularSong.map(item => {
                temp.push([item['grade'], item['songName']]);
            });
            this.tableToExcel(temp, '热门歌曲top500');
        },
        handleExport5() {
            console.log(5);
        },
        handleExport6() {
            console.log(6);
        },

        city() {
            // let geolocation = new BMap.Geolocation();
            // var _this = this;
            // geolocation.getCurrentPosition(
            //     function getinfo(position) {
            //         console.log(position);
            //         let city = position.address.city; //获取城市信息
            //         let province = position.address.province; //获取省份信息
            //         _this.locationProvince = province;
            //         _this.locationCity = city;
            //         _this.lastDateTime = localStorage.getItem('lastDateTime');
            //     },
            //     function(e) {
            //         _this.locationCity = '定位失败';
            //     },
            //     { provider: 'baidu' }
            // );
            // fetch('/apis/cityjson?ie=utf-8', {
            //     method: 'POST'
            // })
            //     .then(res => {
            //         return res.text();
            //         //解析格式即可
            //     })
            //     .then(res => {
            //         console.log(JSON.parse(res.slice(res.indexOf('{'), res.indexOf('}') + 1)));
            //         this.IP = JSON.parse(res.slice(res.indexOf('{'), res.indexOf('}') + 1)).cip;
            //         this.lastDateTime = localStorage.getItem('lastDateTime');
            //     });
        },
        commafy,
        ...mapMutations([
            'SET_QUKUALBUM_FORM',
            'SET_QUKUARTIST_FORM',
            'SET_QUKUSONG_FORM',
            // 'SET_SLIDEBAR_DATA',
            'SET_TAGSLIST',
            // 曲库概况
            'SET_CARDS',
            'SET_QUKUSURVEY_DATA',
            'SET_NEW_SONG_EXPRESS_DATA',
            'SET_NEW_SONG_EXPRESS_PAGETOTAL',
            'SET_NEW_SONG_EXPRESS_QUERY',
            // 运营概况
            'SET_TOP300_SONG_LIST_DATA',
            'SET_TOP300_SONG_LIST_PAGETOTAL',
            'SET_TOP300_SONG_LIST_QUERY',
            // TOP10000 歌曲
            'SET_TEMP_DATA',
            'SET_TOP10000_SONGS_DATA',
            'SET_TOP10000_SONGS_PAGETOTAL',
            'SET_TOP10000_SONGS_QUERY',
            'SET_SONG_LIST_STATISTICS_DATA',
            // 审核概况
            // 歌单审核概况
            'SET_AUDIT_OVERVIEW_DATA',
            'SET_AUDIT_OVERVIEW_PAGETOTAL',
            'SET_AUDIT_OVERVIEW_QUERY',
            // 曲库审核概况
            'SET_AUDIT_OVERVIEW_DATA_',
            'SET_AUDIT_OVERVIEW_PAGETOTAL_',
            'SET_AUDIT_OVERVIEW_QUERY_',
            // 工作日志
            'SET_WORK_LOG_DATA',
            'SET_WORK_LOG_PAGETOTAL',
            'SET_WORK_LOG_QUERY',
            // 用户反馈
            'SET_USER_FEEDBACK_DATA',
            'SET_USER_FEEDBACK_PAGETOTAL',
            'SET_USER_FEEDBACK_QUERY'
        ]),
        handleSearch() {},
        // 新歌速递
        handleNewSongExpressSearch() {
            this.$set(this.newSongExpressQuery, 'pageIndex', 1);
            this.SET_NEW_SONG_EXPRESS_QUERY(this.newSongExpressQuery);
            this.getNewSongExpressData();
        },
        // 审核概况
        // 歌单审核概况
        handleAuditOverviewSearch() {
            this.$set(this.auditOverviewQuery, 'pageIndex', 1);
            this.SET_AUDIT_OVERVIEW_QUERY(this.auditOverviewQuery);
            this.getAuditOverviewData();
        },
        // 曲库审核概况
        // handleAuditOverviewSearch_() {
        //     this.$set(this.auditOverviewQuery_, 'pageIndex', 1);
        //     this.SET_AUDIT_OVERVIEW_QUERY_(this.auditOverviewQuery_);
        //     this.getAuditOverviewData_();
        // },

        handleAuditOverviewSearch_: debounce(function() {
            this.$set(this.auditOverviewQuery_, 'pageIndex', 1);
            this.SET_AUDIT_OVERVIEW_QUERY_(this.auditOverviewQuery_);
            this.getAuditOverviewData_();
        }, 300),

        // 工作日志
        // handleWorkLogSearch() {
        //     this.$set(this.workLogQuery, 'pageIndex', 1);
        //     this.SET_WORK_LOG_QUERY(this.workLogQuery);
        //     this.getWorkLogData();
        // },
        handleWorkLogSearch: debounce(function() {
            this.$set(this.workLogQuery, 'pageIndex', 1);
            this.SET_WORK_LOG_QUERY(this.workLogQuery);
            this.getWorkLogData();
        }, 300),
        // 用户反馈
        handleUserFeedBackSearch: debounce(function() {
            this.$set(this.userFeedBackQuery, 'pageIndex', 1);
            this.SET_USER_FEEDBACK_QUERY(this.userFeedBackQuery);
            this.getUserFeedBackData();
        }, 300),

        handleExport() {
            console.log('导出');
        },
        handleExport_() {
            console.log('导出');
        },
        // changeDate() {
        //     let now = new Date().getTime();
        //     this.data.forEach((item, index) => {
        //         let date = new Date(now - (6 - index) * 86400000);
        //         item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
        //     });
        // },
        // 曲库概况
        // 分页导航
        handleNewSongExpressPageChange(val) {
            this.$set(this.newSongExpressQuery, 'pageIndex', val);
            this.SET_NEW_SONG_EXPRESS_QUERY(this.newSongExpressQuery);
            this.getNewSongExpressData();
        },
        handleNewSongExpressSizeChange(val) {
            this.$set(this.newSongExpressQuery, 'pageSize', val);
            this.SET_NEW_SONG_EXPRESS_QUERY(this.newSongExpressQuery);
            this.getNewSongExpressData();
        },

        //  运营概况
        // TOP300 歌单
        handleTop300SongListSizeChange(val) {
            this.$set(this.top300SongListQuery, 'pageSize', val);
            this.SET_TOP300_SONG_LIST_QUERY(this.top300SongListQuery);
            this.getTop300SongListData();
        },
        handleTop300SongListPageChange(val) {
            this.$set(this.top300SongListQuery, 'pageIndex', val);
            this.SET_TOP300_SONG_LIST_QUERY(this.top300SongListQuery);
            this.getTop300SongListData();
        },

        // TOP10000 歌曲
        handleTop10000SongsSizeChange(val) {
            // console.log(val);
            this.$set(this.top10000SongsQuery, 'pageSize', val);
            this.SET_TOP10000_SONGS_QUERY(this.top10000SongsQuery);
            // this.getTop10000SongsData();
            this.SET_TOP10000_SONGS_DATA(
                this.tempData.slice(
                    this.top10000SongsQuery.pageSize * this.top10000SongsQuery.pageIndex,
                    this.top10000SongsQuery.pageSize * this.top10000SongsQuery.pageIndex + this.top10000SongsQuery.pageSize
                )
            );
        },
        handleTop10000SongsPageChange(val) {
            // console.log(val - 1);
            this.$set(this.top10000SongsQuery, 'pageIndex', val - 1);
            this.SET_TOP10000_SONGS_QUERY(this.top10000SongsQuery);

            this.SET_TOP10000_SONGS_DATA(
                this.tempData.slice(
                    this.top10000SongsQuery.pageSize * this.top10000SongsQuery.pageIndex,
                    this.top10000SongsQuery.pageSize * (this.top10000SongsQuery.pageIndex + 1)
                )
            );
            // this.getTop10000SongsData();
        },
        // 审核概况
        // 歌单审核概况
        handleAuditOverviewPageChange(val) {
            this.$set(this.auditOverviewQuery, 'pageIndex', val);
            this.SET_AUDIT_OVERVIEW_QUERY(this.auditOverviewQuery);
            this.getAuditOverviewData();
        },
        handleAuditOverviewSizeChange(val) {
            this.$set(this.auditOverviewQuery, 'pageSize', val);
            this.SET_AUDIT_OVERVIEW_QUERY(this.auditOverviewQuery);
            this.getAuditOverviewData();
        },
        //  曲库审核概况
        handleAuditOverviewPageChange_(val) {
            this.$set(this.auditOverviewQuery_, 'pageIndex', val);
            this.SET_AUDIT_OVERVIEW_QUERY_(this.auditOverviewQuery_);
            this.getAuditOverviewData_();
        },
        handleAuditOverviewSizeChange_(val) {
            this.$set(this.auditOverviewQuery_, 'pageSize', val);
            this.SET_AUDIT_OVERVIEW_QUERY_(this.auditOverviewQuery_);
            this.getAuditOverviewData_();
        },
        // 工作日志
        handleWorkLogPageChange(val) {
            this.$set(this.workLogQuery, 'pageIndex', val);
            this.SET_WORK_LOG_QUERY(this.workLogQuery);
            this.getWorkLogData();
        },
        handleWorkLogSizeChange(val) {
            this.$set(this.workLogQuery, 'pageSize', val);
            this.SET_WORK_LOG_QUERY(this.workLogQuery);
            this.getWorkLogData();
        },

        // 用户反馈
        handleUserFeedBackPageChange(val) {
            this.$set(this.userFeedBackQuery, 'pageIndex', val);
            this.SET_USER_FEEDBACK_QUERY(this.userFeedBackQuery);
            this.getUserFeedBackData();
        },
        handleUserFeedBackSizeChange(val) {
            this.$set(this.userFeedBackQuery, 'pageSize', val);
            this.SET_USER_FEEDBACK_QUERY(this.userFeedBackQuery);
            this.getUserFeedBackData();
        },

        handleEdit(index, row) {},
        // 审核概况
        handleAuditOverviewEdit(index, row) {},
        edit_1(index, row) {
            this.SET_QUKUSONG_FORM({});
            this.$router.replace({
                path: '/song/info',
                query: {
                    id: row.objectId
                }
            });
            localStorage.setItem('id_song', row.objectId);
            localStorage.setItem('indexFlag_song', 1);
        },
        edit_2(index, row) {
            this.SET_QUKUARTIST_FORM({});

            this.$router.replace({
                path: '/singer_/edit',
                query: {
                    id: row.objectId
                }
            });
            localStorage.setItem('id_singer', row.objectId);
            localStorage.setItem('indexFlag_singer', 1);
        },
        edit_3(index, row) {
            this.SET_QUKUALBUM_FORM({});

            this.$router.replace({
                path: '/album_3/info_2',
                query: {
                    id: row.objectId
                }
            });
            localStorage.setItem('id_album', row.objectId);
            localStorage.setItem('indexFlag_album', 1);
        },
        // 曲库审核概况
        handleAuditOverviewEdit_(index, row) {
            switch (row.type) {
                case 1:
                    this.$handleLock.call(this, index, row, this.edit_1, '/song/lock', row.objectId);
                    break;
                case 2:
                    this.$handleLock.call(this, index, row, this.edit_2, '/artist/lock', row.objectId);
                    break;
                case 3:
                    this.$handleLock.call(this, index, row, this.edit_3, '/album/lock', row.objectId);
                    break;
            }
        }
    }
};
</script>

<style lang="scss" scoped>
#sys_home {
    .active {
        border: 1px solid #ccc;
    }
    // .handle-box {
    //     margin-bottom: 20px;
    //     .el-form {
    //         display: flex;
    //         flex-direction: row;
    //         .el-form-item {
    //             width: calc(100% / 7);
    //             .el-form-item__content {
    //                 .el-select,
    //                 .handle-input {
    //                     width: 100%;
    //                 }
    //             }
    //         }
    //     }
    // }
    .el-row {
        margin-bottom: 20px;
    }

    .grid-content {
        display: flex;
        align-items: center;
        height: 100px;
    }

    .grid-cont-right {
        flex: 1;
        text-align: center;
        font-size: 14px;
        color: #999;
    }

    .grid-num {
        font-size: 30px;
        font-weight: bold;
    }

    .grid-con-icon {
        font-size: 50px;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        color: #fff;
    }

    .grid-con-1 .grid-con-icon {
        background: rgb(45, 140, 240);
    }

    .grid-con-1 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-2 .grid-con-icon {
        background: rgb(100, 213, 114);
    }

    .grid-con-2 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-3 .grid-con-icon {
        background: rgb(242, 94, 67);
    }

    .grid-con-3 .grid-num {
        color: rgb(242, 94, 67);
    }

    .user-info {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
        border-bottom: 2px solid #ccc;
        margin-bottom: 20px;
    }

    .user-avator {
        width: 80px;
        height: 80px;
        border-radius: 50%;
    }

    .user-info-cont {
        padding-left: 25px;
        flex: 1;
        font-size: 14px;
        color: #999;
    }

    .user-info-cont div:first-child {
        // font-size: 36px;
        font-size: 20px;
        color: #222;
    }

    .user-info-cont div:nth-of-type(2) {
        font-size: 14px;
    }

    .user-info-list {
        font-size: 14px;
        color: #999;
        line-height: 25px;
    }

    .user-info-list span {
        // margin-left: 70px;
    }

    .mgb20 {
        margin-bottom: 20px;
    }

    .todo-item {
        font-size: 14px;
    }

    .todo-item-del {
        text-decoration: line-through;
        color: #999;
    }

    .schart {
        width: 100%;
        height: 300px;
    }

    .handle-input,
    .handle-select {
        width: 120px;
        display: inline-block;
    }

    .handle-box {
        margin-bottom: 10px;
        // .el-form {
        //     display: flex;
        //     flex-direction: row;
        //     .el-form-item {
        //         width: calc(100% / 7);
        //         .el-form-item__content {
        //             .el-select,
        //             .handle-input {
        //                 width: 100%;
        //             }
        //         }
        //     }
        // }
        & > p {
            margin: 0;
            padding: 0;
            margin-bottom: 10px;
            font-size: 18px;
            font-weight: bold;
        }
        .grid-total {
            display: grid;
            grid-auto-flow: row;
            grid-template-columns:
                calc((100% - 15px * 4) / 5) calc((100% - 15px * 4) / 5) calc((100% - 15px * 4) / 5) calc((100% - 15px * 4) / 5)
                calc((100% - 15px * 4) / 5);
            grid-template-rows: 100px;
            row-gap: 15px;
            column-gap: 15px;
            width: 100%;
            div {
                border: 1px solid rgba(0, 0, 0, 0.3);
                box-sizing: border-box;
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                padding: 30px 0 30px;
                box-sizing: border-box;
                p {
                    padding: 0;
                    margin: 0;
                    &:first-of-type {
                        font-size: 12px;
                        font-weight: bold;
                    }
                    &:nth-of-type(2) {
                        font-size: 18px;
                        font-weight: bold;
                        color: #000;
                    }
                }

                &:first-of-type {
                    p {
                        &:nth-of-type(2) {
                            color: #f00;
                        }
                    }
                }
            }
        }
    }
    .mr10 {
        margin-right: 10px;
    }
    .card-wrapper {
        width: 100%;
        height: 100%;
        div {
            width: 50%;
            height: calc(100% / 3);
            float: left;
            padding: 25px;
            box-sizing: border-box;
            cursor: pointer;
            position: relative;

            img {
                width: 100%;
                height: 100%;
            }
            p {
                margin: 0;
                padding: 0;
                font-size: 12px;
                position: absolute;
                bottom: 0;
            }
            &:hover {
                box-shadow: 2px 0px 10px rgba($color: #000000, $alpha: 0.3);
            }
        }
    }
    .total-wrapper {
        display: grid;
        grid-template-columns: 20% 40% 40%;
        grid-template-rows: 250px 250px;

        padding-right: 50px;
        box-sizing: border-box;
        row-gap: 20px;
        column-gap: 20px;
        div {
            width: 100%;
            height: 100%;
            text-align: center;
            &:first-of-type,
            &:nth-of-type(4) {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding: 100px 0px 100px;
                box-sizing: border-box;
                box-shadow: 1px 1px 10px rgba($color: #000000, $alpha: 0.3);
                p {
                    margin: 0;
                    padding: 0;
                    font-weight: bold;
                    &:first-of-type {
                        // font-size: 0.45rem /* 36/80 */;
                        font-size: 14px;
                    }
                    &:nth-of-type(2) {
                        color: #000;
                        font-size: 18px;
                    }
                }
            }
            &:nth-of-type(4) {
                p {
                    &:nth-of-type(2) {
                        color: #000;
                    }
                }
            }
            // {
            //     box-shadow: 1px 1px 10px rgba($color: #000000, $alpha: 0.3);
            //     line-height: 250px;
            // }
            // &:nth-of-type(3) {
            //     box-shadow: 1px 1px 10px rgba($color: #000000, $alpha: 0.3);
            //     line-height: 250px;
            // }
            &:nth-of-type(2),
            &:nth-of-type(3),
            &:nth-of-type(5),
            &:nth-of-type(6) {
                box-shadow: 1px 1px 10px rgba($color: #000000, $alpha: 0.3);
                // line-height: 250px;
            }
        }
    }

    .el-card__body_ {
        padding: 20px;
        box-sizing: border-box;
        border: 1px solid rgba(0, 0, 0, 0.1);
        &:hover {
            box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
        }
    }
}
</style>
